<script setup lang="ts">
import { Notebook } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
import router from "@/router";
defineOptions({
  name: ""
});
const handleAdd = () => {};
const ruleFormRef = ref<FormInstance>();
const form = ref({
  name: "",
  customer: "",
  year: "",
  status: ""
});
const statusOptions = [
  { label: "待补充", value: "1", type: "primary" },
  { label: "进行中", value: "2", type: "success" },
  { label: "草稿", value: "3", type: "info" },
  { label: "待审批", value: "4", type: "warning" }
];
const statusObject = statusOptions.reduce((accumulator, currentValue) => {
  accumulator[currentValue.value] = currentValue;
  return accumulator;
}, {});
const onSubmit = () => {};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const tableData = [
  {
    name: "社区邻里国际共融服务项目",
    year: "2022-01-01至2022-10-10",
    customer: "XXXX民政",
    status: "1",
    createTime: "2022-01-01 12:00:00",
    updateTime: "2022-08-08 12:00:00",
    completeTime: "--",
    org: "孙小小",
    type: "社区服务类",
    vest: "XXX基金会",
    projectLeader: "孙小小",
    departmentLeader: "孙小小",
    financeProgress: 50
  },
  {
    name: "“民生共富”社会工作站品牌共建项目",
    year: "2023-01-01至2023-10-10",
    customer: "XXXX民政",
    status: "2",
    createTime: "2023-01-01 12:00:00",
    updateTime: "2023-08-08 12:00:00",
    completeTime: "2023-08-08 12:00:00",
    org: "孙小小",
    type: "社区服务类",
    vest: "XXX民政局",
    projectLeader: "孙小小",
    departmentLeader: "孙小小",
    financeProgress: 100
  },
  {
    name: "社区工作者关爱服务项目",
    year: "2024-01-01至2024-10-10",
    customer: "XXXX民政",
    status: "3",
    completeTime: "--",
    org: "--",
    type: "为老服务类",
    vest: "XXX民政局",
    projectLeader: "孙小小",
    departmentLeader: "孙小小",
    financeProgress: 50
  },
  {
    name: "社区工作者关爱服务项目",
    year: "2024-01-01至2024-10-10",
    customer: "XXXX民政",
    status: "4",
    completeTime: "--",
    type: "为老服务类",
    vest: "XXX民政局",
    projectLeader: "孙小小",
    departmentLeader: "孙小小",
    financeProgress: 50
  }
];
function repeatAndShuffle(arr, n) {
  const result = [];
  for (let i = 0; i < n; i++) {
    result.push(...arr.slice().sort(() => Math.random() - 0.5));
  }
  return result;
}
const tableData1 = repeatAndShuffle(tableData, 3);
const columns: TableColumnList = [
  {
    label: "项目名称",
    prop: "name",
    align: "center",
    width: "180",
    showOverflowTooltip: true
  },
  {
    label: "项目周期",
    prop: "year",
    align: "center",
    width: 200
  },
  {
    label: "项目类别",
    prop: "type",
    align: "center",
    width: "180",
    showOverflowTooltip: true
  },
  {
    label: "资助方",
    prop: "vest",
    align: "center",
    width: "180",
    showOverflowTooltip: true
  },
  {
    label: "项目负责人",
    prop: "projectLeader",
    align: "center",
    minWidth: 120
  },
  {
    label: "部门负责人",
    prop: "departmentLeader",
    align: "center",
    minWidth: 120
  },
  {
    label: "状态",
    prop: "status",
    slot: "status1",
    align: "center",
    width: "100"
  },
  {
    label: "财务进度",
    prop: "financeProgress",
    align: "center",
    minWidth: 120,
    slot: "financeProgress"
  },

  {
    label: "完成时间",
    prop: "completeTime",
    width: "180",
    align: "center"
  },
  {
    label: "操作",
    width: "160",
    fixed: "right",
    slot: "operation"
  }
];
/** 分页配置 */
const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: tableData1.length,
  align: "right",
  background: true,
  small: false
});
import { ElMessage, ElMessageBox } from "element-plus";

const delClick = row => {
  ElMessageBox.confirm(`是否删除【${row.name}】, 是否继续?`, "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功!"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除"
      });
    });
};
</script>

<template>
  <el-card>
    <template #header>
      <div class="flex items-center justify-between card-header">
        <span>项目立项</span>
        <el-button
          type="primary"
          :icon="Notebook"
          @click="router.push({ name: 'projectAppEditInfo' })"
          >项目立项</el-button
        >
      </div>
    </template>
    <el-form :inline="true" :model="form" label-width="85px" ref="ruleFormRef">
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入项目名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="资方" prop="customer">
        <el-input v-model="form.customer" placeholder="请输入资方" clearable />
      </el-form-item>
      <el-form-item label="部门负责人">
        <el-select
          v-model="form.departmentLeader"
          placeholder="请选择部门负责人"
          clearable
        >
          <el-option label="张三" value="张三"></el-option>
          <el-option label="李四" value="李四"></el-option>
          <el-option label="王五" value="王五"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目负责人" prop="projectLeader">
        <el-select
          v-model="form.projectLeader"
          placeholder="请选择项目负责人"
          clearable
        >
          <el-option label="赵六" value="赵六"></el-option>
          <el-option label="钱七" value="钱七"></el-option>
          <el-option label="孙八" value="孙八"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="form.category" placeholder="请选择类别" clearable>
          <el-option label="政府" value="政府"></el-option>
          <el-option label="基金会" value="基金会"></el-option>
          <el-option label="社会组织" value="社会组织"></el-option>
          <el-option label="慈善信托" value="慈善信托"></el-option>
          <el-option label="企业" value="企业"></el-option>
          <el-option label="个人" value="个人"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="year">
        <el-date-picker
          v-model="form.year"
          clearable
          type="daterange"
          range-separator="至"
          style="width: 230px"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="请选择时间"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <el-button @click="resetForm(ruleFormRef)">重置</el-button>

    <pure-table
      class="mt-[20px]"
      :data="tableData1"
      :columns="columns"
      stripe
      border
      :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa'
      }"
      :pagination="pagination"
    >
      <template #financeProgress="{ row }">
        <el-tag
          :type="row.financeProgress == 100 ? 'success' : 'primary'"
          v-if="row.status == 2"
          >{{ row.financeProgress }}%
        </el-tag>
        <el-tag type="warning" v-else>未开始</el-tag>
      </template>
      <template #status1="{ row }">
        <el-tag :type="statusObject[row.status].type"
          >{{ statusObject[row.status].label }}
        </el-tag>
      </template>
      <template #operation="{ row }">
        <el-button
          type="primary"
          link
          @click="router.push({ name: 'projectAppDetails' })"
          >详情</el-button
        >
        <el-button
          type="primary"
          link
          @click="router.push({ name: 'projectAppEditInfo' })"
        >
          编辑</el-button
        >
        <el-button type="primary" link @click="delClick(row)">删除</el-button>
      </template>
    </pure-table>
  </el-card>
</template>

<style lang="scss" scoped>
.el-select {
  --el-select-width: 220px;
}
.el-input {
  --el-input-width: 220px;
}
</style>
